Components

Spinners

Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity.

SmallSmalldev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner slds-spinner--small" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

MediumMediumdev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner slds-spinner--medium" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

LargeLargedev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner slds-spinner--large" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Brand SmallBrand Smalldev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Brand MediumBrand Mediumdev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--brand slds-spinner slds-spinner--medium" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Brand LargeBrand Largedev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--brand slds-spinner slds-spinner--large" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Inverse SmallInverse Smalldev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--inverse slds-spinner slds-spinner--small" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Inverse MediumInverse Mediumdev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--inverse slds-spinner slds-spinner--medium" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Inverse LargeInverse Largedev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--inverse slds-spinner slds-spinner--large" role="alert">
    <span class="slds-assistive-text">Loading</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Component Overview

To use the spinner in a component, the parent of the spinner should be set to position:relative. You can use the utility class .slds-is-relative or add the declaration to your custom component CSS. If you are using the spinner in an iframe and dynamically loading DOM nodes after the page has loaded, it is recommended that you set the .slds-spinner_container to position:fixed so that it remains centered in the viewport.

The background overlay for the spinner is an optional element.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different scroller looks.
Class NameUsage
.slds-spinner
Applied to:

<div>

Outcome:

This is the gray base class for spinner

Required:

Required

Comments:

--

.slds-spinner_container
Applied to:

outer <div>

Outcome:

This container creates a full overlay to dim the page when needed

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--small
Applied to:

.slds-spinner

Outcome:

This is the small spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--medium
Applied to:

.slds-spinner

Outcome:

This is the medium spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--large
Applied to:

.slds-spinner

Outcome:

This is the large spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--brand
Applied to:

.slds-spinner

Outcome:

This creates the blue brand spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--inverse
Applied to:

.slds-spinner

Outcome:

This is the inverse spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner__dot-a
Applied to:

<div>

Outcome:

This creates two of the circles

Required:

Required

Comments:

--

.slds-spinner__dot-b
Applied to:

<div>

Outcome:

This creates two of the circles

Required:

Required

Comments:

--